/*
 * @Description:
 * @Version: 1.0
 * @Autor: c-jack.qian
 * @Date: 2021-03-31 10:29:39
 * @LastEditors: c-jack.qian
 * @LastEditTime: 2021-03-31 12:08:14
 */
import React from 'react';
import './index.less';

interface propType {
  attchsList: Array<any>;
  setAttchsList: Function;
}
const AttchsListPage: React.FC<propType> = ({ attchsList, setAttchsList }) => {
  const handleRemove = attachId => {
    const newData = attchsList.map(item => {
        const itemId = item.attachId || item.realFileKey
        return {
          ...item,
          enabledFlag: itemId === attachId ? 0 : 1
        };
      });
      setAttchsList(newData);
  };
  return (
    <>
      {attchsList.map(item => {
        if(!item.enabledFlag){
          return;
        }
        return (
          <div key={item.attachId || item.realFileKey}>
            <div className="attchsStyle" >
              <span>{item.attachName}</span>
              <i
                className="icon icon-close attchsIconStyle"
                onClick={() => handleRemove(item.attachId || item.realFileKey)}
              ></i>
            </div>
            <br></br>
          </div>
        );
      })}
    </>
  );
};

export default AttchsListPage;